
let diagram;let canvas,panel_body;let context;
let canvasWidth=500,canvasHeight=300;
let start_x=50,start_y=50,
    step_w,step_h,
    unit_w=78,unit_h=34,
    arc_r=10;
let blankColor="rgba(57,57,57,0.56)",
    enableColor="#00ff00",toLevel,isSolved,stateList;
let minUnitWidth=unit_w+30;
window.onload=function Start() {
    drawDiagram(Math.floor(Math.random()*8)+2);
}
function drawDiagram(unitNum=3,_width,_height){
    if(_height==null){
        canvasWidth=minUnitWidth*unitNum+start_x*2;
        canvasHeight=start_y*2+unit_h+30*unitNum;
    }else{canvasWidth=_width;canvasHeight=_height}

    init();
    step_w=(canvasWidth-start_x*2)/(unitNum-1);
    step_h=(canvasHeight-start_y)/(unitNum);

    let times=new Date().toLocaleString();
    let numCharacter=['一','二','三','四','五','六','七','八','九','十'];
    let btnClass=["default",    "warning",       "danger",     "info",   "success","primary"];
    let titleMsgList=["反馈提交时间","提交下一级时间","自动提交时间","处理中",  "解决时间","未到达"];
    toLevel=Math.floor(Math.random()*(unitNum-1)+1);isSolved=Math.round(Math.random());
    function getButtonColor(index){//0用户 1提交者 2自动提交    3处理中     4解决     5未到达
        if(index===0)return 0;
        if(index===toLevel){if(isSolved)return 4;else return 3;}
        if(index>toLevel)return 5;
        return Math.floor(Math.random()*2)+1;
    }stateList=[];for(let i=0;i<10;i++)stateList.push(getButtonColor(i));

    console.log(toLevel,["未解决","已解决"][isSolved],stateList);

    for(let i=0;i<unitNum;i++){
        let name;if(i===0)name="用户";else{name=numCharacter[i-1]+"级客服";}
        let btnMsg=times,btnColor=btnClass[stateList[i]],
            titleMsg=titleMsgList[stateList[i]];
        if(titleMsg==="未到达")btnMsg=null;
        addUnit(start_x+step_w*i,start_y,name,btnColor,btnMsg,titleMsg);
    }

    //context.rect(0,0,canvasWidth,canvasHeight);
    context.lineWidth=5;
    changeColor(context,blankColor);
    context.moveTo(start_x,start_y);//灰横线
    context.lineTo(canvasWidth-50,start_y);
    context.stroke();

    context.beginPath();
    changeColor(context,enableColor);
    context.moveTo(start_x,start_y);//绿横线
    context.lineTo(start_x+step_w*toLevel,start_y);
    context.stroke();

    let offsetX=10;
    let drawUnitBottomLine=function(ind){
        let xx=start_x+step_w*ind;
        let arc_x,arc_y,tri_color;
        tri_color=enableColor;if(ind>toLevel)tri_color=blankColor;
        triangle(context, xx-unit_w/2, start_y, 15, 7,0,tri_color);
        context.moveTo(xx,start_y);//到单元处
        arc_x=xx-arc_r;arc_y=start_y+unit_h+step_h*ind-arc_r;
        context.lineTo(xx,arc_y);//向下
        context.arc(arc_x,arc_y,arc_r,0,Math.PI/2);
        arc_x=start_x+arc_r-offsetX;//圆心平移到左边
        context.lineTo(arc_x,arc_y+arc_r);//向左
        context.arc(arc_x,arc_y,arc_r,Math.PI/2,Math.PI);
        context.lineTo(start_x-offsetX,start_y);//向上到用户单元
        context.stroke();
    };
    let tri_color;
    changeColor(context,blankColor);
    for(let i=1;i<unitNum;i++) {
        drawUnitBottomLine(i);
    }
    tri_color=blankColor;if(isSolved)tri_color=enableColor;
    triangle(context, start_x-offsetX, start_y+unit_h/2, 15, 7,1,tri_color);
    if(isSolved) {
        changeColor(context,enableColor);drawUnitBottomLine(toLevel);
    }

    $('[data-toggle="popover"]').popover()
}
function addUnit(x,y,txt,tClass="success",message=null,titleMsg=null){y+=7;
    let unit=document.createElement("button");
    unit.innerText=txt;
    unit.type="button";
    unit.classList.add("btn");
    unit.classList.add("btn-"+tClass);
    unit.style.position="fixed";
    unit.style.cursor="default";
    unit.style.opacity="1";
    unit.style.left=x.toString()+"px";
    unit.style.top=y.toString()+"px";
    unit.style.display="block";
    // unit.setAttribute("disabled","disabled");
    // unit.onclick=function (){
    // }
    unit.setAttribute("role","button");
    if(titleMsg)unit.setAttribute("title",titleMsg);
    unit.dataset["toggle"]="popover";
    unit.dataset["placement"]="bottom";
    if(message)unit.dataset["content"]=message;
    unit.dataset["trigger"]="focus";
    diagram.children[0].appendChild(unit);

}
function init(){
    diagram=document.getElementById("EditBox");
    for(let i of diagram.children)i.remove();//清空之前的子节点

    panel_body=document.createElement("div");
    panel_body.classList.add("panel-body");

    canvas=document.createElement("canvas");
    canvas.style.width = canvasWidth.toString()+"px";
    canvas.style.height=canvasHeight.toString()+"px";
    canvas.width=canvasWidth;canvas.height=canvasHeight;

    panel_body.appendChild(canvas);
    diagram.appendChild(panel_body);

    context=canvas.getContext("2d");
}
function triangle(ctx,x,y,tri_w,tri_h,dir=0,color=null){
    let b_color=ctx.fillStyle;if(color!=null)changeColor(ctx,color);
    ctx.beginPath();
    let towards=[
        [-tri_w,-tri_h,-tri_w,+tri_h],
        [-tri_h,+tri_w,+tri_h,+tri_w],
        [+tri_w,-tri_h,+tri_w,+tri_h],
        [-tri_h,-tri_w,+tri_h,-tri_w],
    ]
    ctx.moveTo(x+towards[dir][0],y+towards[dir][1]);
    ctx.lineTo(x,y);
    ctx.lineTo(x+towards[dir][2],y+towards[dir][3]);
    ctx.fill();ctx.stroke();
    ctx.beginPath();
    changeColor(ctx,b_color);
}
function changeColor(ctx,c){
    ctx.strokeStyle=c;ctx.fillStyle=c;
}